<template>
  <div class="dashboard">
    <ul class="overview">
      <li class="overview-item" v-for="card in cardList" :key="card.title">
        <Card :card="card" />
      </li>
    </ul>
    <div class="chart">
      <div class="content"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive } from 'vue';
import Card from './card.vue';
import { cards } from './config';
export default {
  components: { Card },
  setup() {
    const cardList = reactive(cards);
    return {
      cardList,
    };
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  .overview {
    display: flex;
    justify-content: space-between;
    .overview-item {
      width: calc((100% - 50px) / 3);
    }
  }
  .chart{
    margin: 15px 0;
    border:1px solid #eee;
    background: #efefef;
    padding: 10px;
    .content{
      background: #fff;
      width: 100%;
      height: 80px;
    }
  }
}
</style>
